
import GuideManager from "./GuideManager";
import GuideEventName from "./GuideEventName";
import GuideItemModel from "./GuideItemModel";
import BaseView from "../../cfw/mvc/BaseView";
import { UIIndex, DIR } from "../../cfw/tools/Define";
import UIManager from "../../cfw/ui/UIManager";


const { ccclass, property } = cc._decorator;

@ccclass
export default class GuideView extends BaseView {

    // 点击区域, 也是pointer和rich的相对布局位置
    @property(cc.Node)
    inner: cc.Node = null;
    // 指针
    @property(cc.Node)
    pointer: cc.Node = null;
    // 文本所在节点
    @property(cc.Node)
    richNode: cc.Node = null;
    // 说明文本
    @property(cc.Label)
    tutorialRich: cc.RichText = null;
    // 动态遮挡
    @property(cc.Node)
    renderMask: cc.Node = null;

    protected model: GuideManager;

    private maskInterval = 0.5;

    private initPos: cc.Vec3 = cc.Vec3.ZERO;
    startNode: cc.Node;
    endNode: cc.Node;
    private draw: boolean = false;

    start() {
        this.node.active = false;
        // this.setModel(GuideManager.instance())
        this.eventProxy.on(GuideEventName.START, this.guideStart, this)
        this.eventProxy.on(GuideEventName.END, this.guideEnd, this)
        this.eventProxy.on(GuideEventName.UPDATE, this.guideStep, this)
        // this.node.on(cc.Node.EventType.TOUCH_START, this.onBackgroundTouch, this);
    }

    onBackgroundTouch() {
        return false
    }

    show() {
        this.setUIIndex(UIIndex.TOP)
        UIManager.instance().pushView(this)
    }

    guideStart() {
        // cc.log(' guideStart ===================')
        this.node.active = true;
        this.initPos = this.renderMask.position;

    }

    guideEnd() {
        this.pointer.active = false;
        this.node.active = false;
        this.renderMask.scale = 1;
        this.renderMask.position = this.initPos;
        this.clearGraphics();
    }

    clearGraphics() {
        // var g: cc.Graphics = UIManager.instance().getGraphics();
        // g.clear();
        // this.draw = false;
    }


    guideStep() {
        this.node.runAction(cc.sequence([cc.delayTime(0.5), cc.callFunc(() => {
            this.guideUpdate();
        })]))
    }
    hideMask() {
        this.renderMask.active = false;
    }
    showMask() {
        this.renderMask.active = true;
        let maskSz = this.renderMask.getContentSize();
        this.renderMask.stopAllActions();
        let worldPos = this.startNode.convertToWorldSpaceAR(cc.Vec2.ZERO)
        this.renderMask.runAction(cc.spawn(cc.scaleTo(
            this.maskInterval,
            this.startNode.width / maskSz.width,
            this.startNode.height / maskSz.height
        ), cc.moveTo(
            this.maskInterval,
            worldPos.x,
            worldPos.y
        )))
        // this.renderMask.runAction();
        // this.renderMask.runAction();
    }
    guideUpdate() {
        this.node.stopAllActions();
        this.pointer.stopAllActions();
        this.pointer.rotation = 0;
        this.pointer.scaleY = 1;
        let item: GuideItemModel = this.model.getItemModel()
        if (!item) {
            return;
        }
        this.pointer.active = true;
        this.startNode = item.getPos(0)
        if (!this.startNode) {
            return;
        }
        let worldPos = this.startNode.convertToWorldSpaceAR(cc.Vec2.ZERO)
        // cc.log(' worldPos ======================== ', this.startNode)
        this.pointer.x = worldPos.x
        this.pointer.y = worldPos.y
        let offsetx = (this.pointer.width) / 2
        let offsety = (this.pointer.height) / 2
        switch (item.getFingerDir()) {
            case DIR.LEFT:
                this.pointer.rotation = -90;
                this.pointer.x += offsetx
                break;
            case DIR.RIGHT:
                this.pointer.rotation = 90;
                this.pointer.x -= offsetx
                break;
            case DIR.UP:
                this.pointer.y -= offsety
                break;
            case DIR.DOWN:
                this.pointer.scaleY = -1;
                this.pointer.y += offsety
                break;
        }

        // cc.log(' this.pointer position  ======================== ', this.pointer.position)

        let posEnd: cc.Node = item.getPos(1)
        if (posEnd) {
            // this.draw = true;
            // this.moveAction(item, offsety)
        } else {
            this.draw = false;
            this.pointer.active = true;
            let duration = 0.5
            switch (item.getFingerDir()) {
                case DIR.LEFT:
                case DIR.RIGHT:
                    this.pointer.runAction(cc.repeatForever(cc.sequence([cc.moveBy(duration, 20, 0), cc.moveBy(duration, -20, 0)])))
                    break;
                case DIR.UP:
                case DIR.DOWN:
                    this.pointer.runAction(cc.repeatForever(cc.sequence([cc.moveBy(duration, 0, 20), cc.moveBy(duration, 0, -20)])))
                    break;
            }

        }
        this.tutorialRich.string = item.getDesc()
        this.node.runAction(cc.sequence([cc.delayTime(0.1), cc.callFunc(() => {
            this.setDescWH(item)
        })]))
        if (item.hasMask()) {
            this.showMask();
        } else {
            this.hideMask();
        }

    }

    update() {
        // if (this.draw) {
        //     let startPos = this.startNode.convertToWorldSpaceAR(cc.Vec2.ZERO)
        //     let endPos = this.endNode.convertToWorldSpaceAR(cc.Vec2.ZERO)
        //     var g: cc.Graphics = UIManager.instance().getGraphics();
        //     g.clear();
        //     // cc.log(' ddddddddddddddddddddddddddddddddddddddddddd')
        //     g.lineWidth = 10;
        //     // g.fillColor.fromHEX('#ff0000');
        //     g.moveTo(startPos.x, startPos.y)
        //     g.lineTo(endPos.x, endPos.y)
        //     g.close();

        //     g.stroke();
        //     g.fill();
        // }
    }


    moveAction(item: GuideItemModel, offsety: number) {
        let posEnd: cc.Node = item.getPos(1)
        if (posEnd && posEnd.parent) {
            this.pointer.active = true;
            let posStart = item.getPos(0)
            let worldPos = posStart.convertToWorldSpaceAR(cc.Vec2.ZERO)
            this.startNode = posStart;

            let endPos = posEnd.parent.convertToWorldSpaceAR(posEnd.position)

            this.endNode = posEnd;
            endPos.y -= offsety

            // this.draw = true;
            this.draw = true;
            cc.tween(this.pointer).to(1, { x: endPos.x, y: endPos.y }).call(() => {
                this.pointer.position.x = worldPos.x;
                this.pointer.position.y = worldPos.y;
                this.pointer.active = false;
                this.clearGraphics();

            }).start()
 
        }

    }

    setDescWH(item) {
        let height = (this.pointer.height + this.richNode.height);
        let width = (this.pointer.width + this.richNode.width);
        switch (item.getDescDir()) {
            case DIR.LEFT:
                this.richNode.x = this.pointer.x - width;
                this.richNode.y = this.pointer.y
                break;
            case DIR.RIGHT:
                this.richNode.x = this.pointer.x + width
                this.richNode.y = this.pointer.y
                break;
            case DIR.UP:
                this.richNode.x = this.pointer.x
                this.richNode.y = this.pointer.y + height
                break;
            case DIR.DOWN:
                this.richNode.x = this.pointer.x
                this.richNode.y = this.pointer.y - height
                break;
        }
    }

}
